<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JFaker</title>
    <#include "/WEB-INF/admin/app/common/_public.html" >
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="alternate icon" type="image/png" href="${ctx}/resources/i/favicon.png">
        <link rel="stylesheet" href="${ctx}/resources/css/amazeui.min.css"/>
        <!--[if lt IE 9]>
        <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
        <script src="${ctx}/resources/js/amazeui.ie8polyfill.min.js"></script>
        <![endif]-->

        <!--[if (gte IE 9)|!(IE)]><!-->
        <script src="${ctx}/resources/js/jquery.min.js"></script>
        <!--<![endif]-->
        <script src="${ctx}/resources/js/amazeui.min.js"></script>
<style>
    .header {
        text-align: center;
    }
    .header h1 {
        font-size: 200%;
        color: #333;
        margin-top: 30px;
    }
    .header p {
        font-size: 14px;
    }
    #vld-tooltip {
        position: absolute;
        z-index: 1000;
        padding: 5px 10px;
        background: #F37B1D;
        min-width: 150px;
        color: #fff;
        transition: all 0.15s;
        box-shadow: 0 0 5px rgba(0,0,0,.15);
        display: none;
    }

    #vld-tooltip:before {
        position: absolute;
        top: -8px;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -8px;
        content: "";
        border-width: 0 8px 8px;
        border-color: transparent transparent #F37B1D;
        border-style: none inset solid;
    }
</style>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>Office心计划</h1>
        <p>8小时的感动</p>
    </div>
    <hr />
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
        <h3>登录</h3>


        <form method="post" id="login" class="am-form" action="${ctx}/security/user/dologin" >

            <div class="am-form-group am-input-group-warning">

                <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
            <input type="text" class="am-form-field" placeholder="你的账号（至少 3 个字符）" name="user.username" id="username2"
                   data-foolish-msg="报上名来！" value="${user.username!}" required>

    </div>
    <div class="am-form-group am-input-group-warning">
        <span class="am-input-group-label"><i class="am-icon-unlock-alt am-icon-fw"></i></span>
        <input type="text" class="am-form-field" placeholder="你的密码" name="user.password" id="password"
               pattern="^\d{6}$"    data-foolish-msg="把 IQ 卡密码交出来！！" value="${user.password!}" required>
    </div>

            <!--<div class="am-form-group">-->
                <!--<label for="username">账号:</label>-->
                <!--<input type="text" name="user.username" id="username"  placeholder="输入用户名（至少 3 个字符）"data-foolish-msg="报上名来！" value="${user.username!}" required  >-->
            <!--</div>-->
            <!--<div class="am-form-group">-->
            <!--<label for="password">密码:</label>-->
            <!--<input type="password" name="user.password" id="password2" placeholder="6 位数字的银行卡密码" pattern="^\d{6}$"-->
                    <!--data-foolish-msg="把 IQ 卡密码交出来！"-->
                   <!--value="${user.password!}" required  >-->
            <!--</div>-->
            <label id="remember-label" for="remember">记住我</label>
            <input type="checkbox" name="remember" id="remember" checked="" />
            <br />
            <div class="am-form-error">
                <label class="red">${error!}</label>
            </div>

            <div class="am-animation-shake">
                <button class="am-btn am-btn-warning am-btn-block" data-doc-animation="shake" >
                登 录
            </button>
    </div>
            <div class="am-cf">

                <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl">
                <a href=""  class="am-btn am-btn-default am-btn-sm am-fr"> 忘记密码 ^_^? </a>
                <a href="${ctx}/register"  class="am-btn am-btn-default am-btn-sm am-fr">注册</a>
            </div>
        </form>

        <hr>
        <p style="text-align: center;">© 2015taixingsoft. Licensed under MIT license.</p>
    </div>
</div>

</body>
<script>
    $(function() {
        $('#login').validator({
            onValid: function(validity) {
                $(validity.field).closest('.am-form-group').find('#vld-tooltip').hide();
            },
            onInValid: function(validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('foolishMsg') || this.getValidationMessage(validity);

                if (!$alert.length) {
                    $alert = $('<div id="vld-tooltip"></div>').hide().
                            appendTo($group);
                }

                $alert.html(msg).show();
            }
        });
    });
</script>
</html>